<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>循环渲染指令</title>
        <!--1、导入vue.js，在window全局中就有了vue的构造函数（就和导入jQuery，window全局就有$可以使用一样）-->
        <script src="../js/vue_2.7.8.js"></script>
        <link href="../css/bootstrap.css" rel="stylesheet">
    </head>
    <body>

        <!--2、写希望让vue控制的html区域-->
        <div id="app" >
            <!--
                table:样式为表格；
                table-bordered：表格显示边框；
                table-hover:鼠标放上高亮
                table-striped:各行变色
            -->
            <p style="color: red">v-for的简单使用</p>
            <table class="table table-bordered table-hover table-striped">
                <thead>
                    <th>id</th>
                    <th>姓名</th>
                    <th>年龄</th>
                </thead>
                <tbody>
                    <tr v-for="item in list" :title="item.name">
                        <td>{{item.id}}</td>
                        <td>{{item.name}}</td>
                        <td>{{item.age}}</td>
                    </tr>
                </tbody>
            </table>

            <p style="color: red">带索引的v-for</p>
            <table class="table table-bordered table-hover table-striped">
                <thead>
                    <th>索引</th>
                    <th>id</th>
                    <th>姓名</th>
                    <th>年龄</th>
                </thead>
                <tbody>
                    <tr v-for="(item,index) in list" :title="item.name">
                        <td>{{index}}</td>
                        <td>{{item.id}}</td>
                        <td>{{item.name}}</td>
                        <td>{{item.age}}</td>
                    </tr>
                </tbody>
            </table>

            <p style="color: red">官方建议：只要用到v-for指令，那么就一定要绑定一个:key的属性（尽量把id作为可以的值）</p>
            <table class="table table-bordered table-hover table-striped">
                <thead>
                    <th>索引</th>
                    <th>id</th>
                    <th>姓名</th>
                    <th>年龄</th>
                </thead>
                <tbody>
                    <tr v-for="(item,index) in list" :key="item.id" :title="item.name">
                        <td>{{index}}</td>
                        <td>{{item.id}}</td>
                        <td>{{item.name}}</td>
                        <td>{{item.age}}</td>
                    </tr>
                </tbody>
            </table>
        </div>

    </body>
</html>
<script>

    //3.创建vue对象，并渲染dom
    new Vue({
        //vue的固定写法，表示vue要控制的哪个dom；接收的是个选择器
        el: "#app",
        //data是要渲染的数据
        data: {
            list:[
                {
                    id:1,
                    name:'张三',
                    age:18
                },{
                    id:2,
                    name:'李四',
                    age:19
                },{
                    id:3,
                    name:'王五',
                    age:20
                }
            ]
        }
    });

</script>
